<template>
  <div>
      <div class="barber-navbar-box" v-if="lang==1">
        <div class="barber-navbar-one" @click="toMine">
          <text class="myIconfont common-navbar-font" :style="{color:userNavColor}">&#xe659;</text>
          <text class="myfont common-navbar-text" :style="{color:userNavColor}">مېنىڭ</text>
        </div>
        <div class="barber-navbar-one"  @click="toOrder">
          <text class="myIconfont common-navbar-font" :style="{color:orderNavColor}">&#xe655;</text>
          <text class="myfont common-navbar-text" :style="{color:orderNavColor}">زاكازلىرىم</text>
        </div>
        <div class="barber-navbar-one" @click="toHome">
          <text class="myIconfont common-navbar-font" :style="{color:homeNavColor}">&#xe64f;</text>
          <text class="myfont common-navbar-text" :style="{color:homeNavColor}">باشبەت</text>
        </div>
      </div>
      <div class="barber-navbar-box" v-else>
        <div class="barber-navbar-one" @click="toHome">
          <text class="myIconfont common-navbar-font" :style="{color:homeNavColor}">&#xe64f;</text>
          <text class="myfont common-navbar-text" :style="{color:homeNavColor}">首页</text>
        </div>
        <div class="barber-navbar-one"  @click="toOrder">
          <text class="myIconfont common-navbar-font" :style="{color:orderNavColor}">&#xe655;</text>
          <text class="myfont common-navbar-text" :style="{color:orderNavColor}">订单</text>
        </div>
        <div class="barber-navbar-one" @click="toMine">
          <text class="myIconfont common-navbar-font" :style="{color:userNavColor}">&#xe659;</text>
          <text class="myfont common-navbar-text" :style="{color:userNavColor}">我的</text>
        </div>
      </div>
  </div>
</template>

<style scoped>
    .barber-navbar-box{
      position: fixed;
      right: 0px;
      left: 0px;
      bottom: 0px;
      height: 100px;
      background-color: #f7f7f7;
      flex-direction: row;
      border-top-color: #a6a6a6;
      border-top-style: solid;
      border-top-width: 1px;
    }
    .barber-navbar-one{
      width: 250px;
      height: 100px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .common-navbar-text{
      color: #a6a6a6;
      font-size: 28px;
    }
    .common-navbar-font{
      color: #a6a6a6;
      font-size: 45px;
    }

    .myfont{
        font-family: 'myfont';
        white-space: nowrap;
    }
    .myIconfont{
        font-family: 'iconfont';
    }
</style>

<script>
  // 全局变量
  var self;
  const dom = weex.requireModule('dom');
  var storage = weex.requireModule('storage');
  var wxrouter;
  module.exports = {
      //动态数据属性
      data : function () {
          return {
            msg:'home'
          }
      },
      //公开数据属性
      props : {
         lang: {
             default: ''
         },
         homeNavColor: {
             default: '#a6a6a6'
         },
         userNavColor: {
             default: '#a6a6a6'
         },
         orderNavColor: {
             default: '#a6a6a6'
         }
      },
      //组件头文件导入
      components: {
          // fix_loading: require('../fix_loading/fix_loading.vue')
      },
      //组件实例创建完成，属性已绑定，但DOM还未生成
      created() {
          self = this;
          wxrouter = weex.requireModule('wxrouter');
          dom.addRule('fontFace', {
              'fontFamily': "myfont",
              'src': "url(" + self.gFontUrl + ")"
          });

          var icon_font = self.gIconFontUrl;
          dom.addRule('fontFace', {
              'fontFamily': "iconfont",
              'src': "url('" + icon_font + "')"
          });

          self.lang=self.gLang;

      },
      //方法，函数
      methods: {
          clicked:function(){
              console.log('test');
          },
          toHome:function(){
            // this.$emit('toHome');
            console.log('home');
            wxrouter.pushViewControllerParams('/home');
          },
          toOrder:function(){
            console.log('order');
            wxrouter.pushViewControllerParams('/order');
          },
          toMine:function(){
            console.log('mine');
            wxrouter.pushViewControllerParams('/usercenter');
          }
      }
  }
</script>
